<template>
	<view>
		<scroll-view scroll-y="true" :style="{height:height+'px'}" @scrolltolower='lwor'>
			<view class="orderList">
				<view class="itemBox" v-for="(item,index) in goodlist" :key="item.buyerId">
					<radio color="#FE5900" class="rido" :checked="item.join" v-show="join" @click="chooseEd(index)"/>
					<view class="item">
						<view class="top">
							<view class="orderNo">预售订单号：{{item.orderNo || 110120114119}}</view>
							<view class="order">预售订单</view>
							<view class="status">复制</view>
						</view>
						<view class="middle">
							<image :src="item.goodsSpecsList[0].goodsSpecsImg || '../../../static/img/avtr.png'"></image>
							<view class="right">
								<view class="title">{{item.goodsName}}</view>
								<view class="content">
									<view class="spec">规格：{{item.goodsSpecsList[0].goodsSpecsName}}</view>
									<view class="num">x {{item.goodsSpecsList[0].stock}}</view>
								</view>
							</view>
						</view>
						<view class="bottom">
							<view class="priceBox">
								<view class="price">￥<text>{{item.goodsSpecsList[0].price || 0.00}}</text></view>
								<!-- <image src="../../../static/icon/jifen.png"></image>
						<view class="zeng">赠12750</view> -->
							</view>
							<view class="btns" v-if="item.status == 1">
								<view @click.stop="cancelBtn(item,item)">取消预售</view>
								<view @click.stop="Offshelf(item.goodsId,index)">下架</view>
								<view @click.stop="selectShow(item)">申请自用</view>
							</view>
							<view class="btns" v-else-if="item.status == 6">
							        <view>已售罄</view>
							       </view>
							       <view class="btns" v-else-if="item.status == 5">
							        <view>已取消</view>
							       </view>
							       <view class="btns" v-else-if="item.status == 4">
							        <view>已下架</view>
							       </view>
							       <view class="btns" v-else-if="item.status == 2">
							        <view>审核中</view>
							       </view>
							       <view class="btns" v-else-if="item.status == 3">
							        <view>审核失败</view>
							       </view>
							<view class="share">
								<image src="../../../static/img/icon_share.png"></image>
								<view class="text">分享</view>
							</view>
						</view>
					</view>
				</view>
					<u-loadmore :status="status" bg-color="rgba(255,255,255,0)" margin-top='15' margin-bottom='15' @loadmore='laodmore' :loadText="loadText"/>
				<pwd-popup ref="pwdPopup" @sendData="selfUseOrder"></pwd-popup>
				<u-popup v-model="popupshow" mode="center">
					<view class="yt-list">
						<view class="yt-list-cell b-b" @click="payType = 3">
							<view class="cell-tit clamp">
								<image src="../../../static/img/doudou.png" mode=""></image>
								<text class="cell-tit clamp">余额</text>
							</view>
							<image src="../../../static/img/xuanzhong1.png" mode="" v-if="payType == 1"></image>
							<image src="../../../static/img/xuanzhong2.png" mode="" v-else></image>
						</view>
						<!-- <view class="yt-list-cell b-b" @click="payType = 2">
						<view class="cell-tit clamp">
							<image src="../../static/img/money.png" mode=""></image>
							<text class="cell-tit clamp">闲豆</text>
						</view>
						<image src="../../static/img/xuanzhong1.png" mode=" " v-if="payType == 2"></image>
						<image src="../../static/img/xuanzhong2.png" mode="" v-else></image>
					</view> -->
						<!-- <view class="yt-list-cell b-b" @click="payType = 3">
						<view class="cell-tit clamp">
							<image src="../../static/img/hongbao.png" mode=""></image>
							<text class="cell-tit clamp">现金</text>
						</view>
						<image src="../../static/img/xuanzhong1.png" mode="" v-if="payType == 3"></image>
						<image src="../../static/img/xuanzhong2.png" mode="" v-else></image>
					</view>
					<view class="yt-list-cell b-b" @click="payType = 4">
						<view class="cell-tit clamp">
							<text class="iconfont icon-USDT usdt"></text>
							<text class="cell-tit clamp">USDT</text>
						</view>
						<image src="../../static/img/xuanzhong1.png" mode="" v-if="payType == 4"></image>
						<image src="../../static/img/xuanzhong2.png" mode="" v-else></image>
					</view> -->
						<view class="yt-list-cell b-b" style="justify-content: flex-end;">
							<u-button type="success" size="mini" @click="goPwd">确定</u-button>
						</view>
					</view>
				</u-popup>

				<!-- 选择规格 S -->
				<u-popup v-model="seleteShow" mode="bottom" border-radius="20">
					<view class="selectBox">
						<view class="top">
							<image v-if="specSelected.length>0" :src="specSelected[0].goodsSpecsImg" mode="" class="goodsImg"></image>
							<view class="right">
								<view class="selected">
									价格：
									<text class="price" v-if="specSelected.length>0" >￥{{specSelected[0].price}}</text>
								</view>
								<text v-if="specSelected.length>0">库存 {{specSelected[0].stock}} 件</text>
								<view class="selected">
									规格：
									<text class="selected-text"  v-if="specSelected.length>0">
									{{specSelected[0].goodsSpecsName}}
								</text>
								</view>
							</view>
						</view>
						<view class="attr-list">
							<text>规格：</text>
							<view class="item-list">
								<text v-for="(childItem, childIndex) in specList" :key="childIndex" class="tit" :class="{selected: childItem.selected}"
								 @click="selectSpec(childIndex, childItem.goodsSpecsId)">
									{{childItem.goodsSpecsName}}
								</text>
							</view>
						</view>

						<view class="count">
							<text>数量</text>
							<view class="right" v-if="specSelected.length>0">
								<u-number-box v-model="num" :min="1"  :max='specSelected[0].stock'></u-number-box>
							</view>
						</view>

						<button class="btnSelect" @click="buy">确定</button>
					</view>
				</u-popup>
				<!-- 选择规格 E -->
			</view>
		</scroll-view>
		<view class="btn">
			<button @click="onJoin">{{btnText}}</button>
		</view>
	</view>
</template>

<script>
	import * as api from '@/api/order/index.js';
	import {getMygoods} from '@/api/user/index.js';
	import {
		getUserAddressList
	} from '@/api/user/address.js';
	import tfggVerify from "@/components/tfgg-verify/tfgg-verify.vue";
	export default {
		props: ["height"],
		components: {
			tfggVerify
		},
		data() {
			return {
				status: 'loading',
				loadText: {
						loadmore: '获取数据错误,点击重新加载',
						loading: '加载中',
						nomore: '已经到底啦'
					},
				goodlist:[
				],
				seleteShow: false,
				btnText: "加入分组",
				join: false,
				orderId: '',
				popupshow: false,
				payType: 1,
				itemDetail: '',
				itemImg: '',
				num: 1,
				specSelected: [],
				specList: [],
				merchantHead: '',
				merchantName: '',
				goodsId: '',
				goodsName: '',
				pageNum:1,
				pageSize:20,
				type:''
			}
		},
		created() {
			this.getMySaleList()
			this.goodlist.forEach(e=>{
				e.join = false;
			})
		},
		onshow() {
			console.log(this.addRessShow)
			this.goodlist.forEach(e=>{
				e.join = false;
			})
		},

		methods: {
			chooseEd(index) {
				if(this.goodlist[index].join) {
					this.goodlist[index].join = false
				}else{
					this.goodlist[index].join = true
				}
			},
			/* 校验结果回调函数 */
			verifyResult(res){
				if(res){
					this.$refs.verifyElement.reset();//校验成功重置插件
					uni.showLoading({
					    title: '加载中'
					});
					this.$refs.pwdPopup.show();
					uni.hideLoading()
				}
				console.log(res);
			},
			laodmore(){},
			lwor(){
				if(this.status == 'nomore'){
					return
				}
				this.getMySaleList()
			},
			async getMySaleList() {
				try{
					let parmas = {
						pageSize:this.pageSize,
						pageNum:this.pageNum,
						status:1
					}
					const ret = await getMygoods(parmas);
					let orderList = ret.data.obj.list;
					orderList.forEach(e=>{
						e.join = false;
					})
					this.goodlist = this.goodlist.concat(orderList);
					if(orderList.length < this.pageSize){
						this.status = 'nomore'
					}
					this.pageNum++
				}catch(error){
					this.status = 'loadmore'
				}
			},
			async Offshelf(item,index) {
				try {
					let param = {
						goodsId: item,
						status: 0
					}
					const ret = await api.goodsUpdateStatus(param);
					this.utils.toast('下架成功', 'success')
					this.goodlist =[]
					this.pageNum = 1
					this.status = 'loading'
					this.getMySaleList()
				} catch (error) {

				}
			},
			async getList() {
				let param = {
					pageNum: 1,
					pageSize: 20
				}
				try {
					const ret = await getUserAddressList(param);
					if (ret.data.obj.length > 0) {
						this.addressData = ret.data.obj
					} else {
						this.noAddress = true
					}
				} catch (error) {

				}
			},
			//选择规格
			selectSpec(index, pid) {
				let list = this.specList;
				list.forEach(item => {
					this.$set(item, 'selected', false);
				})
				this.$set(list[index], 'selected', true);
				this.specSelected = [];
				this.specSelected.push(list[index]);
			},
			selectShow(item) {
				this.goodsId = item.goodsId
				this.type = 2
				this.specSelected = []
				this.specSelected.push(item.goodsSpecsList[0]);
				this.specSelected[0].merchantName = item.merchantName
				this.specSelected[0].merchantHead = item.merchantHead
				this.specSelected[0].goodsName = item.goodsName
				this.specList = item.goodsSpecsList
				for(var i =0;i<this.specList.length;i++){
					this.specList[0].merchantHead =  item.merchantHead
					this.specList[0].merchantName =  item.merchantName
					this.specList[0].goodsName =  item.goodsName
				}
				this.$set(item.goodsSpecsList[0], 'selected', true);
				this.seleteShow = true;
			},
			UseOrder(orderId) {
				this.orderId = orderId;
				this.popupshow = true;
			},
			goPwd() {
				this.addRessShow = false;
				this.$refs.pwdPopup.show();
			},

			onJoin() {
				if (this.join == false) {
					this.join = true
					this.btnText = '完成'
				} else {
					let list=[]
					this.goodlist.forEach(e=>{
						e.join == true ? list.push(e.goodsId) :'';
					})
					this.join = false
					this.btnText = '加入分组'
					uni.navigateTo({
						url: '/pages/my/preSale/join?list=' + list
					})
				}
			},
			 cancelBtn(item) {
				this.type = 1
				this.specSelected = []
				this.specSelected.push(item.goodsSpecsList[0]);
				this.specList = item.goodsSpecsList
				this.$set(item.goodsSpecsList[0], 'selected', true);
				this.seleteShow = true;
			},
			buy() {
				this.seleteShow = false;
				this.specSelected[0].num = this.num 
			
				let goodsList = this.specSelected
				if(this.type == 2){
				try {
					uni.setStorageSync('saleData', goodsList);
				} catch (e) {

				}
				this.toPage(0, '/pages/my/preSale/orderPreSale/createOrder?goodsId='+this.goodsId);
				}else if(this.type ==1){
						let params = {
							orderId: this.specSelected[0].orderId,
							quantity: this.num
						}
					api.cancelOrder(params).then(res=>{
						this.goodlist =[]
						this.pageNum = 1
						this.status = 'loading'
						this.getMySaleList()
						uni.showToast({
							title:res.data.msg,
							icon:'none'
						})
					}).catch(err=>{
						this.goodlist =[]
						this.pageNum = 1
						this.status = 'loading'
						this.getMySaleList()
						uni.showToast({
							title:err.data.msg,
							icon:'none'
						})
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import 'orderCom.scss';

	.orderList {
		padding: 1rpx 20rpx;
		padding-bottom: 110rpx;

		.itemBox {
			display: flex;
			align-items: center;

			.rido {
				margin-right: 10rpx;
			}
		}

		.item {
			flex: auto;
			margin-top: 20rpx;
			padding: 20rpx;
			border-radius: 10rpx;
			background: #FFFFFF;

			.top {
				.status {
					padding: 10rpx 30rpx;
					color: #FE5900;
					border: 1px solid #FE5900;
					border-radius: 100rpx;
				}

				font-size: 26rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.middle {
				display: flex;
				margin-top: 25rpx;
				align-items: flex-start;

				image {
					flex: none;
					width: 110rpx;
					height: 110rpx;
					margin-right: 20rpx;
				}

				.right {
					flex: auto;

					.title {
						font-size: 25rpx;
						font-weight: 600;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						margin-right: 20rpx;
					}

					.content {
						display: flex;
						font-size: 25rpx;
						align-items: center;
						justify-content: space-between;
						margin-top: 10rpx;

						.spec {
							margin-top: 5rpx;
							color: #949494;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							margin-right: 20rpx;
							margin-right: 30rpx;
						}

						.num {
							color: #949494;
						}
					}
				}
			}

			.bottom {
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 24rpx;

				.priceBox {
					display: flex;
					align-items: center;

					image {
						height: 25rpx;
						width: 20rpx;
						margin-left: 30rpx;
					}

					.price {
						font-size: 20rpx;
						color: #FE5900;

						text {
							font-size: 30rpx;
						}
					}

					.zeng {
						color: #FE5900;
						margin-left: 6rpx;
					}
				}

				.btns {
					display: flex;
					align-items: center;

					view {
						margin-left: 30rpx;
						font-size: 26rpx;
						color: #949494;
					}
				}

				.share {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #949494;

					image {
						width: 25rpx;
						height: 25rpx;
						margin-right: 8rpx;
					}
				}
			}
		}

	}

	.btn {
		height: 130rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 99;
		background: #F4F4F4;

		button {
			width: 85%;
			height: 80rpx;
			line-height: 80rpx;
			background: #FE5900;
			color: #FFFFFF;
			border-radius: 100rpx;
		}
	}

	.yt-list {
		margin: 0upx auto;
		margin-top: 30upx;
		background: #fff;
		border-radius: 20upx;
		width: 100%;
	}

	.yt-list-cell {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10upx 30upx 10upx 40upx;
		line-height: 70upx;
		position: relative;

		image {
			width: 32upx;
			height: 32upx;
		}

		&.cell-hover {
			background: #fafafa;
		}

		&.b-b:after {
			left: 30upx;
		}

		.cell-icon {
			height: 32upx;
			width: 32upx;
			font-size: 22upx;
			color: #fff;
			text-align: center;
			line-height: 32upx;
			background: #f85e52;
			border-radius: 4upx;
			margin-right: 12upx;

			&.hb {
				background: #ffaa0e;
			}

			&.lpk {
				background: #3ab54a;
			}

		}

		.cell-more {
			align-self: center;
			font-size: 24upx;
			color: $font-color-light;
			margin-left: 8upx;
			margin-right: -10upx;
		}

		.cell-tit {
			display: flex;
			align-items: center;
			font-size: 26upx;
			color: $font-color-light;
			margin-left: 10upx;
		}

		.cell-tip {
			font-size: 26upx;
			color: $font-color-dark;

			&.disabled {
				color: $font-color-light;
			}

			&.active {
				color: $base-color;
			}

			&.red {
				color: $base-color;
			}
		}

		&.desc-cell {
			.cell-tit {
				max-width: 90upx;
			}
		}

		.desc {
			flex: 1;
			font-size: $font-base;
			color: $font-color-dark;
		}
	}
</style>
